import type { App } from 'vue'
import { createWebHashHistory, createRouter } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import { useAuthStore } from '@/store/auth'
import { initBackEndRoutes } from '@/router/backEnd'
import { dynamicRoutes } from '@/router/modules/dynamicRoutes'
import { loginRoutes } from '@/router/modules/loginRoutes'

declare module 'vue-router' {
  interface RouteMeta {
    title?: string; // 菜单标题
    icon?: string;  // 菜单图标
    linkTo?: string; // 外链地址
    cache?: boolean; // 是否缓存
    hidden?: boolean; // 是否在菜单中显示
    isBreadcrumd?: boolean; // 是否显示到面包屑
    isAuth?: boolean; // 菜单标题
    transitionName?: string; // 菜单标题
  }
}

/**
 * 加载路由
 */
const allRoutes: Array<RouteRecordRaw> = [
  ...dynamicRoutes,
  ...loginRoutes,
];
export const router = createRouter({
  history: createWebHashHistory(),
  routes: allRoutes
})

/**
 * 路由前置，跳转到任意路由都会经过此钩子
 */
// 白名单，不需要通过认证
const whiteList = ['/login']
// console.log('router.getRoutes()', router.getRoutes());
router.beforeEach(async (to, _from, next) => {
  const authStore = useAuthStore()
  // 获取访问令牌
  const hasToken = authStore.accessToken
  if (hasToken) { // 有令牌：判断是否有用户信息和权限信息
    if (to.path === '/login') { //已登录，而访问的目标是/login,则进入首页
      return next({ path: '/' })
    } else {
      // 无用户信息或无权限，则调用接口获取
      if (!authStore.userInfo || authStore.menuList?.length as number <= 0) {
        // console.log('hasToken111', authStore.userInfo, authStore.menuList)
        // 获取用户信息和权限信息，后端控制路由
        await initBackEndRoutes()
        // 跳转到目标路由
        next({ path: to.path, query: to.query })
      } else {// 有用户信息和权限信息，则跳转到目标路由
        // console.log('hasToken222', authStore.userInfo, authStore.menuList)
        return next();
      }
    }
  } else {// 无令牌：跳转到登录页
    // 白名单直接发行
    if (whiteList.indexOf(to.path) !== -1) {
      return next()
    } else {
      // 非白名单，未认证跳转登录页。与登录页‘提交数据’相对应
      return next(`/login?redirect=${to.path}`)
    }
  }
})
/**
 * 初始化路由表
 */
// export function resetRouter() {
//   router.getRoutes().forEach((route) => {
//     console.log('route', route);
//   })
// }

export const setupRouter = (app: App<Element>) => {
  app.use(router)
}